{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    <div class=" pad5 ">
        <div class="round5" style="height: 30vw">
            <mu-carousel class="round5" style="height: 30vw">
                <mu-carousel-item class="round5" v-for="item in banner">
{#                     <img class="round5" style="width: 100vw;height: 50vw" :src="picUrl(item.pic)" onerror="this.src=pic404">#}
                    <img class="round5" style="width: 100vw;height: 30vw" :src="picUrl(item.pic)" onerror="this.src=pic404" @click="goto('articlesInfo',{id:item.action})" v-if="isTrue(item.action)">
                    <img class="round5" style="width: 100vw;height: 30vw" :src="picUrl(item.pic)" onerror="this.src=pic404" v-if="!isTrue(item.action)">

                </mu-carousel-item>
            </mu-carousel>
        </div>
        <div class="padt5" v-if="isTrue(announce) && announce.length>0">
            <mu-carousel hide-indicators hide-controls  style="height: 8vw" interval="3333">
                <mu-carousel-item  v-for="item,index in announce[0]">
                    <div class="flrc fs8 pad3 bc13 round30">
                        <div class="flex1"> [[item.text]] </div>
                        <div class="">[[timePass(item.createAt)]]前</div>
                    </div>
                </mu-carousel-item>
            </mu-carousel>
        </div>
    </div>
    <div class="flrc pad3 bc2 c13">
        <div class="pad5"><span class="fa fa-ellipsis-v"></span></div>
        <div class="flex1 flrc pos-r padt5 padb5">
            <mu-menu cover placement="bottom" :open.sync="distanceOpen">
                <div class="fs8">
                    <span v-if="distance == 0">不限制距离</span>
                    <span v-if="distance > 0">[[distance]] km 以内</span>

                    <span class="fa fa-sort-down"></span>
                </div>
                <mu-list slot="content">
                    <mu-list-item button @click="setDistance(5)">
                        <mu-list-item-title>5km以内</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setDistance(10)">
                        <mu-list-item-title>10km以内</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setDistance(15)">
                        <mu-list-item-title>15km以内</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setDistance(20)">
                        <mu-list-item-title>20km以内</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setDistance(0)">
                        <mu-list-item-title>不限制距离</mu-list-item-title>
                    </mu-list-item>
                </mu-list>
            </mu-menu>
        </div>
        <div class="flex1 flrc pos-r padt5 padb5">
            <mu-menu cover placement="bottom" :open.sync="timeOpen">
                <div class="fs8">
                    <span v-if="expire == 0">不限制时间</span>
                    <span v-if="expire > 0">[[expire]]天以内 </span>
                    <span class="fa fa-sort-down"></span>
                </div>
                <mu-list slot="content">
                    <mu-list-item button @click="setExpire(1)">
                        <mu-list-item-title>1天以内</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setExpire(3)">
                        <mu-list-item-title>3天以内</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setExpire(7)">
                        <mu-list-item-title>7天以内</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setExpire(15)">
                        <mu-list-item-title>15天以内</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setExpire(0)">
                        <mu-list-item-title>不限制时间</mu-list-item-title>
                    </mu-list-item>
                </mu-list>
            </mu-menu>
        </div>
        <div class="flex1 flrc fs8">
            <mu-menu cover placement="bottom" :open.sync="sortOpen">
                <div class="fs8">
                    <span v-if="orderby == ''">最新发布</span>
                    <span v-if="orderby == 'near'">距离最近 </span>
                    <span class="fa fa-sort-down"></span>
                </div>
                <mu-list slot="content">
                    <mu-list-item button @click="setOrderby('')">
                        <mu-list-item-title>最新发布</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button @click="setOrderby('near')">
                        <mu-list-item-title>距离最近</mu-list-item-title>
                    </mu-list-item>
                </mu-list>
            </mu-menu>
        </div>
    </div>
    <div class="flex1 bcf round30 mar5 padl10 padr5 flrc bdso">
        <input v-model="keywords" class="flex1 marl5 tac" type="text" placeholder="请输入服务名称关键词检索">
        <div class="pos-r round  padl5 padr5">
            <mu-ripple @click="search()"><span class="fa fa-search c12"></span></mu-ripple>
        </div>
    </div>
    <div class="">
        <div class="pos-r" v-for="item in list" v-if="isTrue(list)">
                {% include "ApiCloud/Base/inc.task.list.base.html.twig" %}
                <mu-ripple @click="goto('taskInfo',{id:item.task.id})"></mu-ripple>
        </div>
    </div>

{% endblock %}
